<template>
  <view>
    <u-navbar :border-bottom="false" :is-back="false" title="" :background="{backgroundColor: 'rgba(0,0,0,0)'}">
      <view class="navbars u-f-ac u-f-jsb">
        <view class="u-f1">
          <u-icon @click="$u.route({type: 'back', delta: 1})" name="arrow-left" size="34" color="#fff"></u-icon>
        </view>
        <view class="u-f-ajc">
          <image src="/static/images/header.png" mode="widthFix"></image>
        </view>
        <view class="u-f1" style="text-align: right;">
          <!-- <u-button type="error" size="mini" :custom-style="customStyle" @click="showPopup=true">汇购预排</u-button> -->
        </view>
      </view>
    </u-navbar>

    <view class="num_box f-w-700 u-f-ajc u-f-column">
      <view>切换账号</view>
    </view>

    <view class="message-container">
      <scroll-view scroll-y="true" style="height: 800rpx;">
        <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="down" @down="downCallback" @up="upCallback">
          <u-empty v-if="!list.length" text="暂无账号列表" mode="list" marginTop="200"></u-empty>
          <uni-swipe-action v-if="list.length">
            <uni-swipe-action-item v-for="(item, index) in list" :key="index" :right-options="optionsOne"
              @click="handleAddress($event, item, index)">
              <view class="u-f-ac u-f-jsb items" @click.stop="change(item, index)">
                <view>
                  <view class="f-w-700 name">{{item.nickname}}</view>
                  <view class="id">{{item.member_id}}</view>
                </view>
                <view class="mobile">{{item.mobile}}</view>
              </view>
            </uni-swipe-action-item>
          </uni-swipe-action>
        </mescroll-body>
      </scroll-view>
      <view style="padding: 30rpx 0;" class="u-f-ajc">左滑账号可删除账号哦~</view>
      <view class="recharge_btn u-f-ajc" @click="showPopup=true">
        + 新增账号
      </view>

    </view>


    <u-popup v-model="showPopup" mode="bottom" height="40%">
      <view class="popups">
        <view class="f-w-700 u-f-ac u-f-jsb popup_title">
          <view style="opacity: 0;"><u-icon name="close-circle"></u-icon></view>
          <view>添加账号</view>
          <view><u-icon name="close-circle" size="40" @click="showPopup=false"></u-icon></view>
        </view>
        <view class="inputs">
          <view class="input_title">用户名称</view>
          <view class="inpupt u-f-ac">
            <!-- <view class="f-w-700" style="font-size: 46rpx;">￥</view> -->
            <u-input v-model="userName" type="text" placeholder=" "></u-input>
          </view>
        </view>
        <view class="inputs" style="margin-top: 40rpx;">
          <view class="input_title">账户密码</view>
          <view class="inpupt u-f-ac">
            <!-- <view class="f-w-700" style="font-size: 46rpx;">￥</view> -->
            <u-input v-model="pwd" type="password" placeholder=" "></u-input>
          </view>
        </view>

        <view style="padding: 50rpx;">
          <u-button type="success" @click="submit">添加账号</u-button>
        </view>
      </view>
    </u-popup>

  </view>
</template>

<script>
  import * as API_Malls from '@/api/malls.js'
  import * as API_Members from '@/api/members.js';
  import {
    Foundation
  } from '@/ui-utils/index.js'
  import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
  import md5Libs from "@/libs/function/md5";
  import Cache, {
    Keys
  } from '@/utils/cache.js';
  export default {
    mixins: [MescrollMixin],
    data() {
      return {
        list: [], //列表
        from: '', //页面来源
        optionsOne: [{
          text: '删除',
          style: {
            backgroundColor: '#FD5B00',
            'font-size': '22rpx',
            'font-weight': '600'
          }
        }],
        down: {
          auto: false //是否在初始化完毕之后自动执行一次下拉刷新的回调
        }, //下拉刷新的配置参数

        showPopup: false,
        userName: '',
        pwd: '',
      }
    },
    onLoad(options) {},
    onShow() {
      this.downCallback()
    },
    methods: {
      downCallback() {
        this.list = []
        this.getMemberWl()
        this.mescroll.resetUpScroll(true)
      },
      upCallback(page) {
        this.mescroll.endErr()
      },
      //获取地址列表
      getMemberWl() {
        API_Malls.getMemberWl().then(response => {
          this.list = response
        })
      },

      //左滑设置默认，删除地址事件
      handleAddress($event, item, index) {
        const memberId = item.member_id
        uni.showModal({
          title: '请谨慎操作！',
          content: `确认要删除${item.nickname}这个账号吗`,
          confirmText: '删除',
          confirmColor: 'rgb(242, 20, 20)',
          cancelText: '取消',
          success: async (res) => {
            if (res.confirm) {
              let res = await API_Malls.deleteMemberWldel({
                memberId
              })
              this.$u.toast('删除成功！')
              this.getMemberWl()
              // setTimeout(() => {
              //   uni.switchTab({
              //     url: '/pages/tabs/mine/mine'
              //   })
              // }, 1200)
            }
          }
        })
      },
      change(item, index) {
        console.log(item, index)
        const memberId = item.member_id
        uni.showModal({
          title: '再次提醒~',
          content: `确认要切换为${item.nickname}这个账号吗`,
          confirmText: '确定',
          confirmColor: 'rgb(242, 20, 20)',
          cancelText: '取消',
          success: async (res) => {
            if (res.confirm) {
              let response = await API_Malls.getMemberWlCheckIn({
                memberId
              })
              this.$u.toast('切换成功！')
              Cache.setItem(Keys.accessToken, response.access_token)
              Cache.setItem(Keys.refreshToken, response.refresh_token)
              let res2 = await API_Members.getUserInfo()
              Cache.setItem(Keys.user, res2)
              setTimeout(() => {
                uni.switchTab({
                  url: '/pages/tabs/mine/mine'
                })
              }, 1200)
            }
          }
        })
      },
      submit() {
        if (!this.userName) return this.$u.toast('请输入用户名称')
        if (!this.pwd) return this.$u.toast('请输入账户密码')
        this.showPopup = false
        uni.showModal({
          title: '再次提醒~',
          content: `确认要添加${this.userName}这个账号吗`,
          confirmText: '确定',
          confirmColor: 'rgb(242, 20, 20)',
          cancelText: '取消',
          success: async (res) => {
            if (res.confirm) {
              let res = await API_Malls.putMemberWladd({
                userName: this.userName,
                pwd: md5Libs.md5(this.pwd),
              })
              this.$u.toast('添加成功！')
              this.userName = ''
              this.pwd = ''
              this.getMemberWl()
              // setTimeout(() => {
              //   uni.switchTab({
              //     url: '/pages/tabs/mine/mine'
              //   })
              // }, 1200)
            }
          }
        })
      },


    }
  }
</script>

<style lang="scss">
  .address-container {
    position: relative;

    .add-address {
      position: absolute;
      bottom: 60rpx;
      width: 100%;
    }
  }

  .address {
    margin-bottom: -23px;
  }

  .items {
    padding: 30rpx 30rpx;
    width: 100%;
    background-color: #fff;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    // border-bottom: 1px solid #ddd;

    .id {
      font-size: 24rpx;
      color: #888;
    }

    .name {
      font-size: 34rpx;
      margin-bottom: 10rpx;
    }

    .mobile {}
  }

  .popups {
    width: 100%;
    height: 100%;
    padding: 30rpx 50rpx;

    .popup_title {
      margin-bottom: 30rpx;
    }

    .inputs {
      border-bottom: 1px solid #ccc;

      .input_title {
        color: #888;
      }
    }
  }
</style>


<style lang="scss">
  page {
    width: 100%;
    background: url(/static/images/bg.png) no-repeat 0 0;
    background-size: cover;
  }

  .num_box {
    padding: 30rpx 0 60rpx;
    color: #FFDDAE;

    >view:nth-of-type(1) {
      font-size: 60rpx;
    }
  }

  .message-container {
    width: 100%;
    height: 1200rpx;
    background-color: #F4F5F7;
    border-radius: 40rpx 40rpx 0 0;
    padding: 40rpx 30rpx 0;
  }

  .recharge_btn {
    width: 100%;
    height: 110rpx;
    text-align: center;
    color: #fff;
    background: url(/static/images/chongzhi/button.png) no-repeat 0 0;
    background-size: cover;
  }
</style>